<ui:composition template="index.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:ui="http://java.sun.com/jsf/facelets">

	<ui:param name="pageTitle" value="Perfil | ReviewIt" />
	<ui:param name="pageName" value="page-profile" />

	<ui:define name="css"></ui:define>

	<ui:define name="feature"></ui:define>

	<ui:define name="content">
		<h3>
			<div class="icon-user"></div>
			Perfil
		</h3>
		<hr />
		<ul class="button-group right">
			<li><a href="" data-reveal-id="dlg-update-photo"
				class="small secondary button">Alterar Foto</a></li>
			<li><a href="" data-reveal-id="dlg-update-password"
				class="small alert button">Alterar Senha</a></li>
		</ul>
		<h:form id="form-update" class="clear-both">
			<p:messages id="msg-update" autoUpdate="true" closable="true"
				showDetail="false" />

			<h:outputText for="update-firstName" value="Nome" />
			<p:inputText id="update-firstName"
				value="#{userSessionBean.user.firstName}" required="true"
				validator="validaAlfaNumerico"
				requiredMessage="Favor informar o nome!" />

			<h:outputText for="update-lastName" value="Sobrenome" />
			<p:inputText id="update-lastName"
				value="#{userSessionBean.user.lastName}" required="true"
				validator="validaAlfaNumerico"
				requiredMessage="Favor informar o sobrenome!" />

			<h:outputText for="update-email" value="Email" />
			<p:inputText id="update-email" value="#{userSessionBean.user.email}"
				required="true" validator="validaEmail"
				requiredMessage="Favor informar o email" />

			<h:outputText for="update-birthdate" value="Data de Nascimento" />
			<p:calendar id="update-birthdate"
				value="#{userSessionBean.user.birthdate}" pattern="dd/MM/yyyy"
				locale="pt" />

			<h:outputText for="update-website" value="Website" />
			<p:inputText id="update-website"
				value="#{userSessionBean.user.website}" />

			<h:outputText for="update-location" value="Localização" />
			<p:inputText id="update-location"
				value="#{userSessionBean.user.location}" />

			<h:outputText for="update-about" value="Sobre Você" />
			<p:inputTextarea id="update-about" value="#{userSessionBean.user.about}"/>

			<p:commandButton
				actionListener="#{userBean.update(userSessionBean.user)}"
				oncomplete="validateForm(xhr, status, args, 'dlg-update')"
				value="Salvar" update="form-update" process="form-update" />
			<p:button value="Cancelar" />
		</h:form>
	</ui:define>

	<ui:define name="dialogs">
		<div id="dlg-update-photo" class="reveal-modal small">
			<a class="close-reveal-modal">&#215;</a>
			<h3>
				<span class="icon-picture"></span>Alterar Foto
			</h3>
			<h:form id="form-update-photo">


				<p:commandButton
					oncomplete="validateForm(xhr, status, args, 'form-update-photo')"
					value="Salvar" update="form-update-photo"
					process="form-update-photo" />
			</h:form>
		</div>
		<div id="dlg-update-password" class="reveal-modal small">
			<a class="close-reveal-modal">&#215;</a>
			<h3>
				<span class="icon-lock"></span>Alterar Senha
			</h3>
			<h:form id="form-update-password">
				<h:outputText for="update-current-password" value="Senha Atual" />
				<p:password id="update-current-password"
					value="#{userSessionBean.user.password}" required="true" />

				<h:outputText for="update-new-password" value="Nova Senha" />
				<p:password id="update-new-password"
					value="#{userSessionBean.user.password}" required="true"
					feedback="true" match="update-confirmPassword" />

				<h:outputText for="update-confirm-new-password"
					value="Confirmar Senha" />
				<p:password id="update-confirm-new-password" value=""
					required="true" />

				<p:commandButton
					oncomplete="validateForm(xhr, status, args, 'dlg-update-password')"
					value="Salvar" update="form-update-password"
					process="form-update-password" />
			</h:form>
		</div>
	</ui:define>
</ui:composition>